import { Component } from 'react'
import styles from './index.module.css'

const HOUSE_PACKAGE = [
  {
    id: 1,
    name: '衣柜',
    icon: 'icon-wardrobe'
  },
  {
    id: 2,
    name: '洗衣机',
    icon: 'icon-wash'
  },
  {
    id: 3,
    name: '空调',
    icon: 'icon-air'
  },
  {
    id: 4,
    name: '天然气',
    icon: 'icon-gas'
  },
  {
    id: 5,
    name: '冰箱',
    icon: 'icon-ref'
  },
  {
    id: 6,
    name: '暖气',
    icon: 'icon-Heat'
  },
  {
    id: 7,
    name: '电视',
    icon: 'icon-vid'
  },
  {
    id: 8,
    name: '热水器',
    icon: 'icon-heater'
  },
  {
    id: 9,
    name: '宽带',
    icon: '',
    word: '&#xe90e;'
  },
  {
    id: 10,
    name: '沙发',
    icon: 'icon-sofa'
  },
]

export default class HousePackage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      iconList: [],
    }
  }

  getIconList() {
    const { nameList } = this.props
    const iconList = []
    if (nameList) {
      nameList.forEach(name => {
        for (let i = 0; i < HOUSE_PACKAGE.length; i++) {
          if (HOUSE_PACKAGE[i].name === name) {
            iconList.push(HOUSE_PACKAGE[i])
          }
        }
      })
      this.setState({
        iconList
      })
    }
  }

  componentDidMount() {
    this.getIconList()
  }

  render() {
    const  { iconList } = this.state
    const { select, onSelect, selectedStatus } = this.props

    return (
      <div className={styles.housePackage}>
        {
          !select ? <div className={styles.title}>房屋配套</div> : null
        }
        <div className={styles.icons}>
          {
            !select ? 
            iconList.length ? iconList.map(item => {
              return (
                <div className={styles.name} key={item.id}>
                  <i className={['iconfont', item.icon, styles.i].join(' ')} />
                  <span className={styles.span}>{item.name}</span>
                </div>
              )
            }) : 
            <div className={styles.empty}>暂无数据</div> :
            HOUSE_PACKAGE.map((item, idx) => {
              const selected = selectedStatus[idx]

              return (
                <div className={styles.name} key={item.id} onClick={() => {onSelect(idx, item.name)}}>
                  {
                    item.icon ? 
                    <i className={['iconfont', item.icon, selected ? styles.selectedI : styles.unselectedI].join(' ')} /> :
                    <i className={['iconfont', selected ? styles.selectedI : styles.unselectedI].join(' ')}>&#xe90e;</i>
                  }
                  <span className={selected ? styles.selectedSpan : styles.unselectedSpan}>{item.name}</span>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

HousePackage.defaultProps = {
  onSelect: () => {}
}